<template>
	<view class="content">
		<view class="top_box">
			<view class="kong"></view>
			<view class="top1 flexs2">
				<image class="up_img" src="../../static/image/bs_back.png" @click="goBack"></image>
				<view class="titles">用户签到</view>
				<view class="status">
				</view>
			</view>
			<view class="sign_btn_box" @click='signin'>
				<view class='signtext1' v-if='signstatus'>已签到</view>
				<view class='signtext' v-else>点我签到</view>
			</view>
			<view class='calendaroutbox' v-if="showCalendar">
				<uni-commoncalendar :selected="info.list" :showMonth="false" @change="change"
					@monthSwitch="monthSwitch" />
			</view>
		</view>

		<view class="rank_box">
			<view class="rank_top">
				<image src="../../static/image/yhqd_img_qdpm@2x.png" mode=""></image>
			</view>
			<view class="rank_list">
				<view class="rank_item" v-for="(item,index) in ranklist" :key="index">
					<view class="rank_item_l">
						<view class="rank_num1" v-show="index==0">{{index+1}}</view>
						<view class="rank_num2" v-show="index==1">{{index+1}}</view>
						<view class="rank_num3" v-show="index==2">{{index+1}}</view>
						<view class="rank_num" v-show="index!=0&&index!=1&&index!=2">{{index+1}}</view>
						<view class="rank_avatar1" v-show="index==0">
							<image
								:src="item.avatar?picture.getImgUrl(item.avatar):'../../static/image/gexx_img_mrtx@2x.png'"
								mode=""></image>
						</view>
						<view class="rank_avatar2" v-show="index==1">
							<image
								:src="item.avatar?picture.getImgUrl(item.avatar):'../../static/image/gexx_img_mrtx@2x.png'"
								mode=""></image>
						</view>
						<view class="rank_avatar3" v-show="index==2">
							<image
								:src="item.avatar?picture.getImgUrl(item.avatar):'../../static/image/gexx_img_mrtx@2x.png'"
								mode=""></image>
						</view>
						<view class="rank_avatar" v-show="index!=0&&index!=1&&index!=2">
							<image
								:src="item.avatar?picture.getImgUrl(item.avatar):'../../static/image/gexx_img_mrtx@2x.png'"
								mode=""></image>
						</view>
						<view class="rank_info">
							<view class="rank_name">{{item.nickname}}</view>
							<view class="rank_q_num">签到{{item.num}}次</view>
						</view>
					</view>
					<view class="rank_item_r" v-if="item.today_sign==1">今日已签到</view>
					<view class="rank_item_r1" v-else>今日未签到</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCommoncalendar from '../../components/uni-commoncalendar/uni-commoncalendar.vue'
	import {
		todaySign,
		signIn,
		getSort
	} from '@/api/personal.js'
	export default {
		components: {
			uniCommoncalendar
		},
		data() {
			return {
				showCalendar: true,
				info: {
					list: [{
							date: '2020-11-01'
						},
						{
							date: '2020-11-02'
						},
						{
							date: '2020-11-03'
						},
						{
							date: '2020-11-13'
						},
					]
				},
				signstatus: false,
				ranklist: [],
			}
		},
		onLoad() {
			this.getQianDaoInfo()
			this.getRanking()
		},
		methods: {
			// 日历方法
			change(e) {

				// 当用户点击是提示不可点击
				console.log('change 返回:', e)
				// 模拟动态打卡超过一定打卡最大值
				// if (this.info.selected.length > 5) return
				// this.info.selected.splice(this.info.selected.length-1,0,{date: e.fulldate})

				// this.info.selected.push({
				// 	date: e.fulldate
				// })
			},
			signin() { //点击签到
				if (this.signstatus == false) {
					this.signstatus = !this.signstatus
				}
				todaySign().then(res => {
					this.$msg(res.msg)
					if (res.data.code == 1) {
						this.getQianDaoInfo()
						this.getRanking()
					}
				})
			},
			getQianDaoInfo() {
				var obj = {}
				signIn().then(res =>{
							if (res.code == 1) {
								this.info = res.data
								this.todaySign = this.info.today_is_sign
								if (this.todaySign == 1) {
									this.signstatus = true
								} else {
									this.signstatus = false
								}
							}
						})
					},
					getRanking() {
						var obj = {}
						getSort(obj).then(res => {
							if (res.code == 1) {
								this.ranklist = res.data
							}
						})
					},
					monthSwitch(e) {
						console.log('monthSwitchs 返回:', e)
					},
					gosigninforecode() {
						uni.navigateTo({
							url: '../signinforecode/signinforecode'
						})
					},
					goBack(){
						uni.navigateBack({
							delta:1
						})
					}
			}
		}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100%;
		overflow-y: auto;

		.top_box {
			height: 400rpx;
			width: 100%;
			background-image: url(../../static/img/yhqd_img_bg@2x.044421fc.png);
			background-size: 100% 100%;

			.top1 {
				width: 100%;
				height: 88rpx;
				padding: 26rpx;

				.up_img {
					width: 20rpx;
					height: 36rpx;
				}

				.titles {
					font-size: 34rpx;
					color: #fff;
				}
			}

			.sign_btn_box {
				width: 188rpx;
				height: 188rpx;
				margin: auto;
				background-image: url(../../static/img/qdao_bg.96a3a328.png);
				background-size: 100% 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				.signtext1 {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 700;
					color: #fcb630;
					height: 188rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

			}

			.calendaroutbox {
				width: 95%;
				height: 684rpx;
				margin: auto;

				.uni-calendar {
					display: flex;
					flex-direction: column;
					position: relative;
					background-image: url(../../static/img/yhqd_img_rlbg@2x.9eca8725.png);
					background-repeat: no-repeat;
					background-size: 100% 100%;
					width: 710rpx;
					height: 684rpx;

					.uni-calendar__header {
						position: relative;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						height: 110rpx;
						width: 100%;
					}

					.uni-calendar__box {
						position: relative;
						font-size: 24rpx;
						width: 90%;
						margin: 0 auto;

						.uni-calendar__weeks {
							position: relative;
							display: flex;
							flex-direction: row;
						}
					}

				}
			}
		}

		.rank_box {
			width: 100%;
			height: auto;
			padding: 0 30rpx;
			margin-top: 580rpx;

			.rank_top {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 10rpx;

				image {
					width: 380rpx;
					height: 78rpx;
				}
			}

			.rank_list {
				width: 100%;
				height: auto;

				.rank_item {
					width: 100%;
					height: 70px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 5px;

					.rank_item_l {

						display: flex;
						justify-content: flex-start;
						align-items: center;
						width: auto;
						height: 100%;

						.rank_num1 {
							font-size: 54rpx;
							font-family: PingFang SC;
							font-weight: 700;
							color: #ff4130;
						}

						.rank_avatar1 {
							width: 122rpx;
							height: 118rpx;
							margin-left: 60rpx;
							background-image: url(../../static/img/dsfsdfdsfsdf.png);
							background-size: 100% 100%;
							padding-top: 8rpx;
							padding-left: 12rpx;

							image {
								width: 110rpx;
								height: 110rpx;
								border-radius: 50%;
							}
						}

						.rank_info {
							display: flex;
							justify-content: space-between;
							align-items: flex-start;
							flex-direction: column;
							height: 80rpx;
							margin-left: 28rpx;

							.rank_name {
								font-size: 30rpx;
								font-family: PingFang SC;
								font-weight: 700;
								color: #333;
							}

							.rank_q_num {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999;
							}
						}

					}

					.rank_item_r {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999;
					}
				}
			}
		}

	}
</style>
